<template>
	<view class="page">

		<picker class="picker-item " mode="selector" :range="objList" range-key="typeName" @change="objChange" style="margin: 10px;" >
					<view>请选择发布板块：{{typeName}}</view>
		</picker>
		<view class="feedback-body">
			<textarea auto-focus="true" placeholder="说说您此刻的想法..." v-model="content" class="feedback-textare" />
		</view>
		<view class='feedback-title'>
			<text>图片(总大小10M以下)</text>
		</view>
		<view class="feedback-body feedback-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">点击预览图片</view>
					<view class="uni-uploader-info">{{imageList.length}}/9</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
								<view class="file-remove" @tap="deleteImage(index)" >×</view>
							</view>
						</block>
					</view>
					<view class="uni-uploader__input-box">
						<view class="uni-uploader__input" @tap="chooseImg"></view>
					</view>
				</view>
			</view>
		</view>
		<button type="primary" class="feedback-submit" @tap="send">提交</button>
	</view>
</template>

<script>
	const qiniuUploader = require("../../common/qiniuUploader");
	import {add} from '@/api/cms/page'
	import {
		All
	} from '@/api/cms/category';
	import { getBasicUrl } from '@/common/env.config'
	import {mapGetters} from 'vuex';
	export default {
		data: {
			imageList: [],
			objList: [],
			 objList1: [{
                text: 'item1'
            }, {
                text: 'item2'
            }, {
                text: 'item3'
            }],
			typeName: "",
			content:"",
			showTypeId: ""
		},
		onUnload(){
			this.imageList = [];
			this.content = ""
		},
		onLoad() {
			this.loadShowTypes()
		},
		computed: {
			...mapGetters(['userId'])
		},
		methods: {
			chooseImg() { //选择图片
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: "compressed",
					count: 9,
					success: (res) => {
						this.imageList = res.tempFilePaths;
						//uploadImage(res.tempFilePaths);
					}
				})
			},
			deleteImage(index) {
				console.log("deleteImage"+index)
				
				this.imageList.splice(index, 1);
				console.log(this.imageList)
			},
			objChange(evt) {
            let index = evt.detail.value;
						this.typeName = this.objList[index].typeName
						this.showTypeId = this.objList[index].showTypeId
						console.log(this.showTypeId)
       },
			loadShowTypes: function() {
				var that = this;
				All().then(function(res) {
					that.objList = that.objList.concat(res)
				});

			},
			uploadImage(list) {
				//多张图片地址，保存到一个数组当中
				var imgList = [];
				var that = this;
				var state = 0;//state记录当前已经上传到第几张图片
					new Promise(function (resolve, reject) {
						for (var i = 0; i < list.length; i++) {
							console.log("image.." +list[i])
							qiniuUploader.upload(list[i], (res) => {

								imgList.push({
									pictureKey:res.key,
									seqNo : i,
									isOk:'Y'
								});
								console.log("return image.." +JSON.stringify(res))
								//that.imgList.push()
								state++;
								if (state == list.length) {
									resolve(imgList);
								}
							}, (error) => {
								reject('error');
								console.log('error: ' + error);
							}, {
									region: 'SCN', // 华北区
									uptokenURL: getBasicUrl()+"/api/tool/oss/token?expires="+3600,
									domain: 'p6urwinfd.bkt.clouddn.com',
									shouldUseQiniuFileName: true
								})
						}
					}).then(function (imgList) {
							//addGallery({partyId: that.userId, imgUrls: imgList })
							uni.showLoading({
								title: "保存中",
								mask:true
							})
							add({
								partyId: that.userId,
								categoryTypeId: that.showTypeId,
								showStatusId: "SHOW_TO_CHECK",
								content: that.content,
								showPictures: imgList,
								createdBy: that.userId,
							}).then(response => {
								uni.hideLoading()

								if(response.status == 200 && response.rel == true ) {
									uni.showModal({
										title:"提示",
										content:"发布成功，感谢您积极参与",
										success: async function(){
											uni.navigateBack({
												
											})
										}
									})
								} else {
		
									uni.showModal({
										title:"提示",
										content:"发布出现错误，请重试"
									})
								}
								
							}).catch(err => {
								uni.hideLoading()
								uni.showModal({
									title:"提示",
									content:"发布出现错误，请重试"
								})
							});
					}).catch(err => {
						un.hideLoading()
						uni.showModal({
							title:"提示",
							content:"发布出现错误，请重试"
						})
					})
			},
			previewImage() { //预览图片
				uni.previewImage({
					urls: this.imageList
				});
			},
			send() { //发送反馈
				if(this.content.length <=0 ||this.content.length < 20) {
					uni.showModal({
						title:"提示",
						content:"请至少输入20个字的描述，谢谢"
					})
					return;
				}
				this.uploadImage(this.imageList)
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	page {
		background-color: #EFEFF4;
	}

	.input-view {
		font-size: 28px;
	}
	
/* 	.uploader__file .delete-btn {
				position: absolute;
				top: 4px;
				left: 4px;
				color: white;
				background: darkgray;
				border-radius: 50%;
				font-size: 14px;
				border: 1px solid white;
				font-weight: 1000;
				height: 16px;
				width: 16px;
				line-height: 14px;
				text-align: center;
	} */
	
	.page .feedback-uploader .uni-uploader .uni-uploader-body .uni-uploader__files .uni-uploader__file .file-remove {
      position: relative;
			display: inline;
			right: -134upx;
			top: -174upx;
			width: 20upx;
			height: 20upx;
			font-size:20upx;
			text-align: center;
			color: white;
			cursor: pointer;
			line-height: 20upx;
			border-radius: 50%;
		/* 	transform: rotate(45deg); */
			background: rgba(0, 0, 0, 0.5);

    }
   .page  .feedback-uploader  .uni-uploader .uni-uploader-body  .uni-uploader__files .uni-uploader__file .file-remove:after {
      display: inline;
    }
		
		.feedback-submit {
			background: #7C4BF9 !important;
		}
</style>
